<section class="section section-primary section-primary-scale-2 section-center section-no-border mt-none p-sm" id="demos">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="nav nav-pills sort-source sort-source-style-2" data-sort-id="portfolio" data-option-key="filter">
          <li class="item" id="itemAll"><a href="javaScript:" (click)="product(-1)">全部商品</a></li>
          <li class="item" id="item{{i}}" *ngFor="let category of categoryList;let i = index"><a href="javaScript:" (click)="product(i,category.id)">{{category.name}}</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>
<ul class="portfolio-list sort-destination full-width-spaced mb-xl">
  <li class="col-md-3 col-sm-6 col-xs-12 isotope-item" *ngFor="let product of productList">
    <div class="portfolio-item center">
      <a (click)="productDetail(product.id)" href="javaScript:" class="text-decoration-none block-link pt-md">
								<span class="thumb-info thumb-info-preview thumb-info-preview-long mb-md">
									<span class="thumb-info-wrapper">
										<img class="thumb-info-image" style="width: 300px;height: 320px;" src="{{product.mainImage}}">
									</span>
								</span>
        <h5 class="mb-xs">{{product.name}}</h5>
        <p style="font-size: 24px;color: orangered">￥{{product.price}}</p>
      </a>
    </div>
  </li>

</ul>
